<template>
  <div class="chat-footer">
    <div class="w-full h-[44px] flex justify-between items-center bg-[#fff]">
      <div class="w-[46px] h-[44px] flex justify-center items-center" @click.stop="handleInput">
        <img class="w-[26px] h-[26px]" src="@/assets/images/room/chat-dkeyboard.png" />
      </div>
      <div class="flex-1 w-0 h-[44px] flex items-center justify-center">
        <div class="h-[34px] grow-[1] w-0 mx-[5px] flex items-center bg-[#f5f5f5] rounded-[6px]">
          <van-field
            ref="inputRef"
            v-model="roomState.chatContent"
            @focus="fieldFocus"
            @keydown.enter="$emit('send')"
          />
        </div>
      </div>
      <div class="w-[46px] h-[44px] flex justify-center items-center">
        <img
          v-if="showMore"
          class="w-[26px] h-[26px]"
          src="@/assets/images/room/chat-plus.png"
          @click="switchMore"
        />
        <img
          v-else
          class="w-[26px] h-[26px]"
          src="@/assets/images/room/chat-send.png"
          @click.stop="$emit('send')"
        />
      </div>
    </div>
    <chat-more v-if="roomState.moreOpen"></chat-more>
  </div>
</template>
<script lang="ts" setup>
import chatMore from "./room-more.vue";

const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
const roomState = inject<RoomState>("roomState") as RoomState;

const inputRef = ref();
const showMore = computed(() => {
  if (roomState.chatContent.trim().length == 0) {
    return true;
  }
  return false;
});

const handleInput = () => {
  inputRef.value?.focus();
  fieldFocus();
};
// 输入框聚焦
const fieldFocus = () => {
  roomState.moreOpen = false;
  if (roomState.chatContent) {
    roomState.chatContent = roomState.chatContent + " ";
  } else {
    roomState.chatContent = " ";
  }
  nextTick(() => {
    setTimeout(() => {
      document.documentElement.scrollTop = isSafari ? 318 : document.documentElement.scrollHeight;
      roomState.chatContent = roomState.chatContent.trim();
    }, 200);
  });
};

// 打开关闭更多
const switchMore = () => {
  roomState.moreOpen = !roomState.moreOpen;
};
</script>
<style lang="css" scoped>
.key-item {
  @apply flex-1 mx-[5px] py-[2px] h-[30px] flex justify-center items-center text-[15px] text-[#787878];
}
.key-item.small {
  @apply text-[14px] text-center leading-none;
}
</style>
<style lang="scss" scoped>
.chat-footer {
  position: relative;
  .van-field {
    background-color: transparent;
    padding: 0 10px;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    display: flex;
    align-items: center;
    font-size: 16px;
    :deep(.van-field__control) {
      height: 34px;
    }
  }
  .loading {
    position: absolute;
    top: -30px;
    right: 10px;
  }
}
</style>
